import React, { Component, createRef,Fragment } from 'react'

//引入antd
import {
  Card,
  Button
} from 'antd'

//引入echars图表
import echarts from 'echarts'
//引入ajax请求
import {
  getReadingQuantityByMonths
} from '../../requests'


export default class Dashboard extends Component {
  constructor() {
    super()
    //创建DOM节点使用createRef
    this.readingQuantity = createRef()
    this.readingQuantityOne = createRef()
    this.state={
      readingQuantityMonths:6
    }
  }

  //创建DOM对象，并且将请求的值赋给DOM对象
  setReadingQuantityChartOptions = (data) => {
    //将data里的月份解构出来
    const xAxisData = data.map(item => item.month)
    //将data里的数量解构出来
    const seriesData = data.map(item => item.quantity)
    
    //创建饼状图DOM对象
    this.readingQuantityChart.setOption({
      title: {
      },
      tooltip: {},
      xAxis: {
        type: 'category', 
        data: xAxisData
      },
      yAxis: { type: 'value' },
      series: [{
        name: '销量',
        data: seriesData,
        type: "bar", 
      }]
    })

    //创建柱状图DOM对象
    this.readingQuantityChartOne.setOption({
      title: {
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: xAxisData
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: seriesData[0], name: xAxisData[0] },
            { value: seriesData[1], name: xAxisData[1] },
            { value: seriesData[2], name: xAxisData[2] },
            { value: seriesData[3], name: xAxisData[3] },
            { value: seriesData[4], name: xAxisData[4] },
            { value: seriesData[5], name: xAxisData[5] }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }

  //按钮点击请求新数据
  handleReadingQuantityMonthsChange=(readingQuantityMonths)=>{
    this.setState({
      readingQuantityMonths
    },()=>{
      this.getReadingQuantity()
    })
  }

  //请求后台数据，将数据绑定到实例上
  getReadingQuantity=()=>{
    getReadingQuantityByMonths(this.state.readingQuantityMonths)
    .then(resp => {
      if (resp.data.code === 200) {
        console.log(resp.data.data)
        this.setReadingQuantityChartOptions(resp.data.data)
      }
    })
  }
  //创建DOM对象的生命周期
  componentDidMount() {
    this.readingQuantityChart = echarts.init(this.readingQuantity.current)
    this.readingQuantityChartOne = echarts.init(this.readingQuantityOne.current)
    this.getReadingQuantity()
  }

  render() {
    return (
      <Fragment>
         <Button.Group
         style={{
          marginLeft:320,
          marginTop:10
        }}
         >
        <Button 
          type={this.state.readingQuantityMonths===3 ? 'primary':'default'}
          onClick={this.handleReadingQuantityMonthsChange.bind(this,3)}
        >近三月</Button>
        <Button  
        type={this.state.readingQuantityMonths===6 ? 'primary':'default'}
        onClick={this.handleReadingQuantityMonthsChange.bind(this,6)}
        >近六月</Button>
        <Button
          type={this.state.readingQuantityMonths===9 ? 'primary':'default'}
          onClick={this.handleReadingQuantityMonthsChange.bind(this,9)}
        >近九月</Button>
        <Button
          type={this.state.readingQuantityMonths===12 ? 'primary':'default'}
          onClick={this.handleReadingQuantityMonthsChange.bind(this,12)}
        
        >近一年</Button>
      </Button.Group>
      <Card
      title="半年阅读量占比"
      style={{
        margin: 16,
        background: "#f0f0f0"
      }}
      >
          <div
              ref={this.readingQuantityOne}
              style={{ height: 200 }}
            >

            </div>
      </Card>
      <Card
      title="近半年的阅读量"
      style={{
        margin: 16,
        background: "#f0f0f0"
      }}
      >
        <div
              ref={this.readingQuantity}
              style={{ height: 300 }}
            >
            </div>
      </Card>
      </Fragment>
    )
  }
}
